<template>
  <div class="com-time-filter">
    <div class="show-box" @click="showSelect">
      <div class="show-text">{{ showText }}</div>
      <i class="icon"></i>
    </div>
    <el-form class="form" ref="form" :model="form">
      <el-select class="item" ref="select" v-model="form._timeType" @change="selectChange">
        <el-option :label="item.label" :value="item.value" v-for="(item,index) in typeArr" :key="index"></el-option>
      </el-select>
      <el-date-picker
        class="item"
        ref="date"
        format="yyyy-MM-dd HH:mm:ss"
        valueFormat="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00', '23:59:59']"
        v-model="form._timeArr"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="dateChange"
        @blur="dateBlur">
      </el-date-picker>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeArr: [
        {label: '今天', value: '1'},
        {label: '昨天', value: '2'},
        {label: '本周', value: '3'},
        {label: '上周', value: '4'},
        {label: '本月', value: '5'},
        {label: '上个月', value: '6'},
        {label: '本季度', value: '7'},
        {label: '上一季度', value: '8'},
        {label: '本年', value: '9'},
        {label: '上一年', value: '10'},
        // {label: '自定义', value: '0'},
      ],
      form: {
        timeType: '5',
        _timeType: '5',
        startTime: '',
        endTime: '',
        _timeArr: []
      }
    }
  },
  computed: {
    showText() {
      if (this.form.startTime && this.form.endTime) {
        return this.form.startTime.slice(0, 10) + ' 至 ' + this.form.endTime.slice(0, 10)
      } else {
        const res = this.typeArr.find((item) => {
          return item.value === this.form.timeType
        })
        return res && res.label
      }
    }
  },
  methods: {
    showSelect() {
      this.$refs.select.$el.querySelector('.el-input__inner').click()
    },
    selectChange(val) {
      console.log(val)
      if (val === '0') {
        this.$refs.date.$el.querySelector('.el-range-input').click()
      } else {
        this.form.timeType = val
        this.form._timeType = val
        // 初始化时间范围框
        this.form.startTime = ''
        this.form.endTime = ''
        this.form._timeArr = []
        this.search()
      }
    },
    dateChange(val) {
      this.form.timeType = '0'
      this.form._timeType = '-1'
      this.form.startTime = val[0]
      this.form.endTime = val[1]
      this.search()
    },
    dateBlur(val) {
      if (!this.form.startTime && !this.form.endTime) {
        this.form._timeType = this.form.timeType
      }
    },
    getForm() {
      const form = JSON.parse(JSON.stringify(this.form))
      for (const formKey in form) {
        if (formKey.startsWith('_')) {
          delete form[formKey]
        }
      }
      return form
    },
    search() {
      this.$emit('search', this.getForm())
    }
  }
}
</script>

<style scoped lang="scss">
.com-time-filter {
  position: absolute;
  right: 0;
  top: 0;
  .show-box {
    height: 42px;
    line-height: 42px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    .show-text {
      color: #fff;
      font-size: 16px;
      padding: 0 10px;
      white-space: nowrap;
    }
    .icon {
      width: 12px;
      height: 12px;
      display: block;
      background: url("./images/triangle.png") no-repeat center;
      background-size: 100% 100%;
      margin-right: 5px;
    }
  }
  .item {
    width: 100px;
    position: absolute;
    top: 0;
    right: 0;
    visibility: hidden;
    z-index: 90;
  }
}

</style>
